<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <input type="text" id="txt1">
    <select id="fh">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
        <option value="%">%</option>
    </select>
    <input type="text" id="txt2">
    <input type="button" value="等于" id="btn">
    <input type="text" id="result" readonly>
</body>
<script>
    // 1. 获取元素
    var aaa = document.getElementById("txt1");
    var bbb = document.getElementById("txt2");
    var ccc = document.getElementById("fh");
    var ddd = document.getElementById("btn");
    var eee = document.getElementById("result");

    // 2. 绑定事件
    ddd.onclick = function(){
        // 3. 点击事件内，获取输入框的内容，同时转数值
        var n1 = aaa.value*1;
        var n2 = bbb.value-0;
        // 准备容器，存放计算结果
        var s;
        // 4. 根据选择的不同的符号，决定执行哪种计算方式，将计算结果放在容器s内
        switch(fh.value){
            case "+":
                s = n1 + n2;break;
            case "-":
                s = n1 - n2;break;
            case "*":
                s = n1 * n2;break;
            case "/":
                s = n1 / n2;break;
            case "%":
                s = n1 % n2;break;
        }
        // 5. 将容器s内的数据，直接设置给某个输入框的value
        eee.value = s;
    }

</script>
</html>